<!--权限明细 permissions_detail-->

<template>
    <div id="permissions_detail">
        <!--搜索框-->
        <div class="above_box">
            <div class="page_title"><i class="el-icon-search"></i><span style="margin-left:10px ">搜索权限</span></div>
            <el-row>
                <el-col :span="6" style="padding: 0 50px">
                    <el-input
                            placeholder="请输入权限名称"
                            v-model="searchForm.authName"
                            prefix-icon="el-icon-coordinate"
                            autofocus
                            clearable>
                    </el-input>
                </el-col>
                <el-col :span="18">
                    <el-button
                            type="success"
                            icon="el-icon-document"
                            @click.stop.prevent="()=>{totalData=[...detailTotalData]} ">查看全部
                    </el-button>
                    <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click.stop.prevent="()=>{totalData=outsideMethod.matchArrayData(detailTotalData,{...searchForm})} ">
                        搜索
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <!--信息框-->
        <div class="below_box">
            <div class="page_title"><i class="el-icon-s-check"></i><span style="margin-left:10px ">权限信息</span></div>
            <div style="margin:0 50px">
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :stripe=true
                        :border=true
                        :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                        :cell-style="{textAlign:'center'}"
                        slot="empty"
                >
                    <el-table-column
                            prop="authId"
                            label="权限ID"
                            min-width="25%">
                    </el-table-column>
                    <el-table-column
                            prop="authName"
                            label="权限名称"
                            min-width="25%">
                    </el-table-column>
                    <!--<el-table-column
                            label="权限字段"
                            min-width="25%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.authUrl==='无权限字段'}">{{scope.row.authUrl}}</span>
                        </template>
                    </el-table-column>-->
                    <el-table-column
                            label="父级ID"
                            min-width="25%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.authParentId==='无父级权限'}">{{scope.row.authParentId}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="父级名称"
                            min-width="25%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.authParentName==='无父级权限'}">{{scope.row.authParentName}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                    style="text-align: center;padding-top: 25px"
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :total="totalCount"
                    @current-change="(nowPage)=>{currentPage=nowPage;tableData=outsideMethod.currentPageData(currentPage,pageSize,totalData)}">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import http from '../../tool/http'
    import api from '../../tool/api'
    import pMethod from './pmw_common/p_common_method' //公共方法引入
    import {mapActions, mapState, mapGetters, mapMutations} from 'vuex'

    export default {
        name: "userManager",
        data() {
            return {
                outsideMethod: {...pMethod},/*外部公共方法*/
                currentPage: 1,//当前页
                pageSize: 10,//页面数据条数

                totalData: [],//总数据
                totalCount: 0,//有多少条数据

                searchForm: {
                    authName: '',//搜索权限名称
                },//搜索(注意，搜索表单的内容需要和指定的字段一致)
                tableData: [],//表格需要的数据
            }
        },
        methods: {
            ...mapActions(['getDetailTotalDataAction']),
            whenTotalDataChanged(newValue) {
                this.totalCount = newValue.length;
                this.tableData = this.outsideMethod.currentPageData(1, this.pageSize, newValue)
            },
        },
        watch: {
            totalData(newValue, oldValue) {
                this.whenTotalDataChanged(newValue);
            },
        },
        computed: {
            ...mapGetters(['detailTotalData']),
            /*...mapState({
                detailTotalData(state) {
                    return state.detailTotalData
                }

            }),*/
        },
        beforeCreate() {
            /*http({
                url:api.getPermissions,
                method:'get'
            }).then((msg)=>{
                if(msg.data.code===200){
                    let dataArr=[...msg.data.data];
                    dataArr.map(outItem=>{
                        /!*数据配对*!/
                        dataArr.map(inItem=>{
                            if(outItem.authParentId===inItem.authId){
                                outItem.authParentName=inItem.authName;//获取父级权限的名称
                            }
                        });
                        /!*数据调整*!/
                        if(!outItem.authUrl)outItem.authUrl='无权限字段';
                        if(!outItem.authParentId)outItem.authParentId='无父级权限';
                        if(!outItem.authParentName)outItem.authParentName='无父级权限';
                    });
                    this.totalData=[...dataArr];//为表格赋值
                    this.totalCount=parseInt(dataArr.length);//获取数据长度
                    /!*表格数据赋值*!/
                    this.tableData=this.outsideMethod.currentPageData(1,this.pageSize,this.totalData)
                }
            }).catch((err)=>{
                console.log(err);
            })*/
        },
        async mounted() {
            /*获取数据*/
            await this.getDetailTotalDataAction();
            /*页面总数据*/
            this.totalData = [...this.detailTotalData];

            //console.log(this.detailTotalData);
        }
    }
</script>

<style scoped lang="less">
    * {
        /*margin: 0;
        padding: 0;*/
    }

    .noticeWordColor {
        color: red;
    }

    .page_title {
        border: none;
        border-bottom: 1px solid #CCC8D9;
        font-size: 1.25em;
        padding-bottom: 15px;
        margin-bottom: 15px;
        color: #325b8f;
    }

    #permissions_detail {
        /*background-color: #F1F3F7;
        padding: 15px;*/

        .above_box {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
        }

        .below_box {
            margin-top: 15px;
            background-color: white;
            border-radius: 10px;
            padding: 25px;
        }
    }
</style>
